<template>
	<view class="loginBox">
		<view class="formBox">
			<u--form
				:model="model1"
				:rules="rules"
				ref="uForm"
				labelWidth="80"
				>
				<u-form-item
					style="margin-bottom: 20upx;"
					label="真实姓名"
					prop="userInfo.name"
					required
					borderBottom
					ref="item1">
						<u--input
							v-model="model1.userInfo.name"
							placeholder="请输入真实姓名"
							border="none"
							clearable
						></u--input>
				</u-form-item>
				
				<u-form-item
				style="margin-bottom: 20upx;"
					label="身份证号"
					prop="userInfo.cardNo"
					required
					borderBottom
					clearable
					ref="item1">
						<u--input
							v-model="model1.userInfo.cardNo"
							placeholder="请输入身份证号"
							border="none"
							@change="change"
						></u--input>
				</u-form-item>
				
				<u-form-item
				style="margin-bottom: 20upx;"
					label="性别"
					prop="userInfo.sex"
					borderBottom
					ref="item1">
						<u--input
							v-model="model1.userInfo.sex"
							placeholder="自定识别"
							border="none"
						></u--input>
				</u-form-item>
				
				<u-form-item
				style="margin-bottom: 20upx;"
					label="手机号"
					prop="userInfo.phone"
					required
					borderBottom
					clearable
					ref="item1">
						<u--input
							v-model="model1.userInfo.phone"
							placeholder="请输入手机号"
							border="none"
						>
						</u--input>
				</u-form-item>
				
				<u-form-item
					style="margin-bottom: 20upx;"
					label="验证码"
					prop="userInfo.msgCode"
					borderBottom
					ref="item1">
						<u--input
							v-model="model1.userInfo.msgCode"
							placeholder="请输入验证码"
							border="none"
						>
						<template slot="suffix">
							<u-code
								ref="uCode"
								@change="codeChange"
								seconds="60"
								changeText="X秒重新获取"
							></u-code>
							<u-button
								@tap="getCode"
								:text="tips"
								type="primary"
								></u-button>
						</template>
						</u--input>
				</u-form-item>
			</u--form>
			
			<button class="btn" @click="submit" type="default">登录</button>
		</view>
		
	</view>
</template>

<script>
import {
	setMsg,
	addUser} 
	from '@/api/login.js'
export default {
	data() {
		return {
			tips: '',
			value: '',
			model1: {
				userInfo: {
					name: '',
					cardNo: '',
					sex:'',
					birth:'',
					msgCode:'',
					phone:'',
					openId:uni.getStorageSync('openid'),
					cardType:1
				},
			},	
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.msgCode': {
					type: 'string',
					required: true,
					message: '请填写验证码',
					trigger: ['blur', 'change']
				},
				'userInfo.cardNo':[
					{
						type: 'string',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.idCard()就是返回true或者false的
							return uni.$u.test.idCard(value);
						},
						message: '身份证号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				'userInfo.phone': [
					{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
					
				],
				
				
			},
			
		};
	},
	
	onShow() {
		this.model1.userInfo.openId =  uni.getStorageSync('openid');
	},
	mounted(){
		
	},
	methods: {
		codeChange(text) {
		    this.tips = text;
		},
		//向后端请求验证码
		getCode() {
			const phone = this.model1.userInfo.phone
				if(uni.$u.test.mobile(phone)){
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setMsg({phone:phone}).then(res=>{
							uni.hideLoading();
							console.log(res,"==============");
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast(res.retMsg);
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
								 
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}else{
					uni.$u.toast('请输入正确的手机号');
				}
		},
		 
		submit() {
			const openid = uni.getStorageSync('openid');
			this.$refs.uForm.validate().then(res => {
				this.model1.userInfo.openId = openid
				const params = this.model1.userInfo	
				const userInfo = {
					name:params.name,
					phone:params.phone
				}
				addUser(params).then(res=>{
					uni.$u.toast(res.retMsg)
					const token = res.retData.token;
					uni.setStorageSync('userToken',token);
					console.log(uni.getStorageSync('userToken'),'getStorageSyncToken');
					uni.navigateTo({
						url:'/pages/index/index'
					})
				})
			}).catch(errors => {
				uni.$u.toast("请填写完成身份信息后再登录")
			})
		},
		change(value){
			const params = this.$utils.inputChange(this.model1.userInfo.cardNo)
			this.model1.userInfo.sex = params.sex;
		}
		 
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.uForm.setRules(this.rules)
    },
};
</script>

<style scoped lang="scss">

.formBox{
	padding: 20upx;
	box-sizing: border-box;
}
.btn{
	margin-top: 40upx;
	width: 690upx;
	height: 80upx;
	font-size: 34upx !important;
	color: #fff;
	  /*background-color: $base-color;*/
	border-radius: 10upx;
	  /*box-shadow: 1px 2px 5px #5088fd;*/
	background: linear-gradient(90deg, #5088FD 0%, #62B9F9 100%);
}
</style>
